<template>
	<view class="h-screen flex flex-col">
		<NavBarVue title="运势类"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30" v-if="!loading">
					<view class="box-month mb-20">
						<ImageBoxVue class="character" src="/static/card/character1.png" width="244rpx" height="250rpx">
						</ImageBoxVue>
						<ImageBoxVue class="text" src="/static/card/text1.png" width="321rpx" height="163rpx"></ImageBoxVue>
						<view class="flex justify-end">
							<view class="category">{{list[1].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[1].dlist[0].name}}</view>
							<view class="card-desc">{{list[1].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[1].dlist[0])">下一步</view>
						</view>
					</view>
					<view class="box-year mb-20">
						<ImageBoxVue class="character" src="/static/card/character2.png" width="198rpx" height="246rpx">
						</ImageBoxVue>
						<ImageBoxVue class="text" src="/static/card/text2.png" width="430rpx" height="50rpx"></ImageBoxVue>
						<view class="flex">
							<view class="category">{{list[2].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[2].dlist[0].name}}</view>
							<view class="card-desc">{{list[2].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[2].dlist[0])">下一步</view>
						</view>
					</view>
					<view class="box-march">
						<ImageBoxVue class="character" src="/static/card/character3.png" width="286rpx" height="232rpx">
						</ImageBoxVue>
						<ImageBoxVue class="text" src="/static/card/text3.png" width="273rpx" height="136rpx"></ImageBoxVue>
						<view class="flex justify-end">
							<view class="category">{{list[3].name}}</view>
						</view>
						<view class="box-card-info">
							<view class="cart-title">{{list[3].dlist[0].name}}</view>
							<view class="card-desc">{{list[3].dlist[0].deps}}</view>
							<view class="btn-step" @click="handleNext(list[3].dlist[0])">下一步</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi'

	const id = ref("")
	const list = ref([])
	const loading = ref(true)
	const style = [{
		character: ''
	}]

	onLoad((options) => {
		if (options.id) {
			id.value = options.id
		}
	})
	onShow(() => {
		getCardtypeatSonlist()
	})
	const handleNext = (item) => {
		uni.navigateTo({
			url: `/pages/test/cardDetail?id=${item.id}`
		})
	}
	const getCardtypeatSonlist = () => {
		const opt = {
			id: id.value
		}
		testApi.getCardtypeatSonlist(opt).then(res => {
			list.value = res.data
			loading.value = false
		})
	}
</script>

<style lang="scss" scoped>
	.box-month {
		position: relative;
		padding-top: 96rpx;

		.character {
			position: absolute;
			top: 12rpx;
			left: 24rpx;
			z-index: 100;
		}

		.text {
			position: absolute;
			top: 0;
			left: 188rpx;
			z-index: 99;
		}

		.category {
			background: url(/static/card/title1.png) no-repeat;
			background-size: cover;
			width: 366rpx;
			height: 80rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #1D2088;
			line-height: 80rpx;
			text-align: center;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #469CFF;
			border-radius: 40rpx;
			background: #fff;
			padding: 110rpx 40rpx 66rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title1.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 140rpx;
				padding-right: 76rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 120rpx;
				text-align: right;
			}

			.card-desc {
				font-weight: 400;
				font-size: 36rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}

	.box-year {
		position: relative;
		padding-top: 70rpx;

		.character {
			position: absolute;
			top: 0;
			right: 32rpx;
			z-index: 100;
		}

		.text {
			position: absolute;
			top: 14rpx;
			left: 22rpx;
			z-index: 99;
		}

		.category {
			background: url(/static/card/title2.png) no-repeat;
			background-size: cover;
			width: 366rpx;
			height: 80rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #E60012;
			line-height: 80rpx;
			text-align: center;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #FFE045;
			border-radius: 40rpx;
			background: #fff;
			padding: 110rpx 40rpx 66rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title2.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 140rpx;
				padding-left: 76rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 120rpx;
			}

			.card-desc {
				font-weight: 400;
				font-size: 36rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}

	.box-march {
		position: relative;
		padding-top: 104rpx;

		.character {
			position: absolute;
			top: 26rpx;
			left: 6rpx;
			z-index: 100;
		}

		.text {
			position: absolute;
			top: 0;
			left: 242rpx;
			z-index: 99;
		}

		.category {
			background: url(/static/card/title3.png) no-repeat;
			background-size: cover;
			width: 366rpx;
			height: 80rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #8B0FC5;
			line-height: 80rpx;
			text-align: center;
		}

		.box-card-info {
			position: relative;
			border: 4rpx solid #FD647F;
			border-radius: 40rpx;
			background: #fff;
			padding: 110rpx 40rpx 66rpx 38rpx;

			.cart-title {
				position: absolute;
				top: -24rpx;
				left: -34rpx;
				background: url(/static/card/bg_title3.png) no-repeat;
				background-size: cover;
				width: 100vw;
				height: 140rpx;
				padding-right: 76rpx;
				font-weight: 500;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 120rpx;
				text-align: right;
			}

			.card-desc {
				font-weight: 400;
				font-size: 36rpx;
				color: #171717;
			}

			.btn-step {
				position: absolute;
				right: -4rpx;
				bottom: -4rpx;
				background: url(/static/card/bg_next.png) no-repeat;
				background-size: cover;
				width: 194rpx;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}
</style>